<template>
    <div class="node-details-container">
      <template v-if="tableInfo">
        <div
          v-for="(column, index) in tableInfo.head"
          :key="index"
          :class="{activeColumn: type === 1? left === column.name:right === column.name}"
          class="normalColumn"
          @click="selectColumn(column, index)"
        >
          <div class="columnHead">{{column.name}}</div>
          <div v-for="(columnData, columnDataIndex) in tableInfo.data"
               :key="columnDataIndex"
               class="columnData"
          >
            {{columnData[column.name]}}
          </div>
        </div>
      </template>
        <!-- <div class="data-table">
            <a-table :columns="columns" :data-source="data" bordered  :pagination="false">
                <template slot="name" slot-scope="text">
                <a>{{ text }}</a>
                </template>
            </a-table>
        </div> -->
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  components: {
  }
})

export default class NodeDetails extends Vue {
  @Prop({ default: () => ({})}) tableInfo!: any // 配置信息
  @Prop({ default: 1}) type!: any
  @Prop({ default: ''}) left!: any
  @Prop({ default: ''}) right!: any

  public selectColumnIndex: number = 0

  public selectColumn(column:string, index:number) {
    console.log(column, index, 'column')
    this.$emit('check-column', {type: this.type, column})
    this.selectColumnIndex = index
  }
}
</script>
<style lang="less"  scoped>
.node-details-container {
  display: flex;
  height: 260px;
  overflow-x: auto;
  padding: 5px;

  &::after {
    content: '';
    padding-right: 9px;
  }

  &::-webkit-scrollbar {
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }

  .empty-info {
    flex: 1;
    text-align: center;
  }
}

.normalColumn {
  border: 1px solid #cfcfcf;
  color: #a9a9a9;
  cursor: pointer;
  font-size: 12px;
  margin: 10px 0;
  min-width: 80px;
  text-align: center;
  transition: 0.1s;

  .columnHead {
    background-color: #f1f1f1;
    padding: 10px 5px;
  }

  .columnData {
    border-top: 1px solid #cfcfcf;
    overflow: hidden;
    padding: 10px 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.activeColumn {
  border: #c1c9f6;
  box-shadow: #5862e6 0 0 4px;
  color: #000;
  font-size: 14px;
  margin: 0 1px;
  min-width: 100px;
}

.data-table {
  //   border: 1px solid #eee;
  height: 400px;
  overflow: hidden;

}
</style>
